<!--手机详情页nav  -->
<template>
  <div class="phoneNav">
    <div class="nav-bar">
      <h2>MIX FOLD 小米折叠手机</h2>
      <div class="nav-right">
        <ul>
          <li>
            <a href>概述页</a>
            <span>|</span>
          </li>
          <li>
            <a href>参数页</a>
            <span>|</span>
          </li>
          <li>
            <a href>F码通道</a>
            <span>|</span>
          </li>
          <li>
            <a href>咨询客服</a>
            <span>|</span>
          </li>
          <li>
            <a href>用户评价</a>
          </li>
          
            <button>立即购买</button>
          
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "phoneNav",
  data() {
    return {};
  },

  components: {}
};
</script>
<style lang='less' scoped>
.nav-bar {
  display: flex;
  height: 40px;
  width: 1250px;
  justify-content: space-between;
  margin-right: auto;
  margin-left: auto;
}
.nav-bar h2 {
  font-size: 18px;
  font-weight: 400;
  line-height: 40px;
  color: #424242;
}
.nav-right ul {
  display: flex;
}
.nav-right a {
  color: #616161;
  line-height: 40px;
  display: inline-block;
}
.nav-right span {
  margin: 5px;
}
// .nav-right .btn {
//   display: inline-block;
//   line-height: 40px;
//   margin-left: 10px;
//   &:hover {
//     background-color: orangered;
//   }
// }
.nav-right button {
  background-color: #ff6700;
  border: none;
  color: aliceblue;
  width: 118px;
  height: 28px;
  font-size: 12px;
  line-height: 28px;
  margin-left: 10px;
  margin-top: 5px;
  &:hover {
    background-color: orangered;
  }
}
</style>